<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>Test Ajax Page</title>

    <link rel="stylesheet" href="${ctx}/static/styles/news/newsdetail.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/styles/pagination.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/styles/result.css" type="text/css">

</head>
<body>
<div class="main">
    <div class="container row">
        <div class="search-result col-lg-8">
            <h2 class="search-title">搜索结果<!--<span class="search-result-count">本次共搜索到12条结果</span>--></h2>
            <!--<h3 class="search-result-count"></h3>-->
            <div id="page-container">
                <ul class="search-result-list" id="data-ul">

                </ul>
            </div>
        </div>
        <div class="knowledge-graph col-lg-4">
            <h2 class="search-title">已选结果</h2>
            <ul class="selected-result">

            </ul>
            <button class="btn btn-primary submit-array" onclick="submitArray()">提交</button>
        </div>
    </div>
</div>


<script type="text/javascript" src="${ctx}/static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/pagination.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
    {{#each this}}
    <li class="search-result-item" data-id="{{id}}">
        <div class="search-result-select">
            <input type="checkbox" name="result">
        </div>
        <a href="${ctx}/std/detail/{{id}}" class="search-result-more pull-right" target="_blank">
            查看详情
        </a>
        <div class="search-result-detail">
            <div class="search-result-detail-title">
                {{titleCn}}
            </div>
            <div class="search-result-detail-abs">
                {{workField}}
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    var source = $("#entry-template").html();
    var template = Handlebars.compile(source);

    $('#page-container').pagination({
        dataSource: '${ctx}/test/page',
        locator: 'content',
        totalNumber: ${stdPage.totalElements},
        pageSize: ${stdPage.size},
        ajax: {
            beforeSend: function () {
//                $("#data-ul").html('Loading data ...');
            }
        },
        callback: function (data, pagination) {
            // template method of yourself
//            console.log("hello: "+ data);
            var html = template(data);
            $("#data-ul").html(html);
            findSeleted();
        }
    })

    var $selectId = [];
    $(document).on("click","input[type='checkbox']",function () {
        if($(this).is(":checked")){
            $(this).parent(".search-result-select").addClass("selected");
            var $id = $(this).parents(".search-result-item").attr("data-id"),
                    $title = $(this).parents(".search-result-item").find(".search-result-detail-title").text();
            $("<li class='selected-item' data-id='"+$id+"'>"+$title+"</li>").appendTo($(".selected-result"));
            $selectId.push($id);
        }else{
            $(this).parent(".search-result-select").removeClass("selected");
            var $id = $(this).parents(".search-result-item").attr("data-id");
            removeByValue($selectId,$id);
            $(".selected-result").find("[data-id='"+$id+"']").remove();
        }
    })

    var removeByValue = function(arr, val) {
        for(var i=0; i<arr.length; i++) {
            if(arr[i] == val) {
                arr.splice(i, 1);
                break;
            }
        }
    }

    var findSeleted = function () {
        for(var i = 0;i<$selectId.length;i++){
            $(".search-result-item[data-id='"+$selectId[i]+"']").find("input[type='checkbox']").prop("checked",true);
            $(".search-result-item[data-id='"+$selectId[i]+"']").find(".search-result-select").addClass("selected");
        }
    }
    var i,jsonstr;
    var submitArray=function () {
        jsonstr="[{";
        for(i=0;i<$selectId.length;i++)
        {
            jsonstr +=$selectId[i] + ":" + "\"" + $selectId[i] + "\",";
        }
        jsonstr = jsonstr.substring(0,jsonstr.lastIndexOf(','));
        jsonstr += "}]";
        var t = eval(jsonstr);
        alert(jsonstr);
    }
</script>
</body>
</html>
